<template>
  <div class="portrait --active">
    <img :src="imgs && imgs.replace('{size}',150)" alt="">
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from "vue-property-decorator";
  @Component
  export  default class PlaySongPortrait extends Vue{
         @Prop({}) imgs
  }

</script>

<style lang="scss">
  @include component(portrait){
    width: 70px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    @include option(active){
      animation:circle 10s linear infinite;
    }

    img{
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0 0 3px 2px white;

    }
  }
</style>
